<template>
<div class="ml10 iii">
  <div class="sx111">
    <div class="sx_item flex_ac" v-if="isCity" @click="open('city')">
      <div>{{ city_name||'地区' }}</div>
      <img class="down ml5" src="~@/assets/img/down.png" alt="">
    </div>
  </div>
  <div class="sx111">
    <div class="sx_item flex_ac" v-if="isChain" @click="open('chain')">
      <div>{{ chain_name||'产业链' }}</div>
      <img class="down ml5" src="~@/assets/img/down.png" alt="">
    </div>
  </div>
  <div class="sx111">
    <div class="sx_item flex_ac" v-if="isNews" @click="open('isNews')">
      <div>{{ chain_name||'标签' }}</div>
      <img class="down ml5" src="~@/assets/img/down.png" alt="">
    </div>
  </div>

  <van-popup v-model="showPicker" round position="bottom">
    <van-picker
      v-show="type=='chain'"
      value-key="chain_name"
      show-toolbar
      :columns="chainList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
    <van-picker
      v-show="type=='city'"
      value-key="city_name"
      show-toolbar
      :columns="cityList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
    <van-picker
      v-show="type=='isNews'"
      value-key="type_name"
      show-toolbar
      :columns="typeList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</div>
</template>
<script>
import { news } from '@/api/api.js'
export default {
  name:'Shaixuan',
  props: {
    isChain: {
      default: false
    },
    isCity: {
      default: false
    }, 
    isNews: {
      default: false
    },
  },
  data() {
    return {
      type: '',

      type_name:'',
      city_name: '',
      chain_name: '',
      query: {
        city_id: '',
        chain_id: '',
        type_id: '',
      },
      showPicker: false,
      chainList: [],
      cityList: [],
      typeList: [],
    }
  },
  created() {
    let chainList = JSON.parse(sessionStorage.chainList)
    chainList.unshift({chain_name: '不限',id:''})
    this.chainList = chainList

    this.cityList = JSON.parse(sessionStorage.cityList)

    news.getType().then(res => {
      this.typeList = res.data
    })

  },
  methods: {
    open(type) { 
      this.type = type
      this.showPicker = true
    },
    onConfirm(val,index) {
      this.showPicker = false
      let item = {}
      if (this.type == 'chain') { 
        this.chain_name = val.chain_name
        this.query.chain_id = val.id
      } else if (this.type == 'isNews') { 
        this.type_name = val.type_name
        this.query.type_id = val.id
      } else {
        index.forEach((i, k) => {
          if (i) {
            if (k == 0) {
              item = this.cityList[i]
              this.city_name = item.city_name
              this.query.city_id = item.id
            } else {
              item = item.children[i]
              this.city_name = item.city_name1 || item.city_name
              this.query.city_id = item.id
            }
          } else if (k == 0) { 
            this.city_name = '不限'
            this.query.city_id = ''
          }
        })
      }
      this.$emit('changeInit',this.query)
    },
  }
}
</script>
<style lang="scss" scoped>
.iii{
  display: inline-block;
}
.sx111{
  display: inline-block;
}
.sx_item{
  height: 24px;
  background: #F5F5F5;
  border-radius: 12px;
  font-size: 13px;
  color: #000000;
  padding: 0 10px;
  margin-right: 10px;
  .down{
    width: 6px;
  }
}
</style>